<template>
  <div class="friend-links">
    <h1>友链管理</h1>
    <div class="form-group">
      <label>站点名称</label>
      <input v-model="newLinkName" type="text" placeholder="请输入站点名称" />
      <label>站点 URL</label>
      <input v-model="newLinkUrl" type="text" placeholder="请输入站点 URL" />
      <label>头像 URL</label>
      <input v-model="newAvatarUrl" type="text" placeholder="请输入头像 URL" />
      <div v-if="newAvatarUrl" class="avatar-preview">
        <img :src="newAvatarUrl" alt="Avatar Preview" />
      </div>
      <button @click="addLink" class="add-button">添加友链</button>
    </div>
    <ul class="link-list">
      <li v-for="link in friendLinks" :key="link.id" class="link-item">
        <div class="link-info">
          <img :src="link.avatar_url" alt="Avatar" class="link-avatar" />
          <span class="link-name">{{ link.site_name }}</span> - 
          <a :href="link.site_url" target="_blank" class="link-url">{{ link.site_url }}</a>
        </div>
        <button @click="deleteLink(link.id)" class="delete-button">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

interface FriendLink {
  id: string | number; // 根据实际情况调整类型
  site_name: string;
  site_url: string;
  avatar_url: string; // 添加 avatar_url
}

const userId = '1'; // 替换为实际用户 ID
const newLinkName = ref('');
const newLinkUrl = ref('');
const newAvatarUrl = ref('');
const friendLinks = ref<FriendLink[]>([]);

const fetchFriendLinks = async () => {
  const response = await axios.get(`http://localhost:5000/api/user/${userId}/sitesr`);
  if (response.data.code === 200) {
    friendLinks.value = response.data.data;
  }
};

const addLink = async () => {
  const response = await axios.post(`http://localhost:5000/api/user/${userId}/sites`, {
    site_name: newLinkName.value,
    site_url: newLinkUrl.value,
    avatar_url: newAvatarUrl.value, // 添加 avatar_url
  });
  if (response.data.code === 200) {
    alert('友链添加成功！');
    fetchFriendLinks(); // 刷新友链列表
    newLinkName.value = '';
    newLinkUrl.value = '';
    newAvatarUrl.value = '';
  } else {
    alert('添加失败，请重试！');
  }
};

const deleteLink = async (linkId: string | number) => {
  const response = await axios.delete(`http://localhost:5000/api/user/${userId}/sites/${linkId}`);
  if (response.data.code === 200) {
    alert('友链删除成功！');
    fetchFriendLinks(); // 刷新友链列表
  } else {
    alert('删除失败，请重试！');
  }
};

onMounted(() => {
  fetchFriendLinks(); // 获取友链列表
});
</script>

<style scoped>
.friend-links {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  font-weight: bold;
  color: #555;
}

input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.add-button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.add-button:hover {
  background-color: #45a049;
}

.link-list {
  list-style-type: none;
  padding: 0;
  margin-top: 20px;
}

.link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #fff;
  transition: background-color 0.3s;
}

.link-item:hover {
  background-color: #f1f1f1;
}

.link-info {
  display: flex;
  align-items: center;
}

.link-avatar {
  width: 30px; /* 头像大小 */
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.link-name {
  font-weight: bold;
  color: #333;
}

.link-url {
  color: #007BFF;
  text-decoration: none;
}

.link-url:hover {
  text-decoration: underline;
}

.delete-button {
  padding: 5px 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #d32f2f;
}

.avatar-preview {
  margin-top: 10px;
}

.avatar-preview img {
  width: 50px; /* 预览图大小 */
  height: 50px;
  border-radius: 50%;
}
</style>